<template>
  <div class="hotActivity">
    <top></top>
    <mall-header></mall-header>
    <div class="hotActivity_advert">
      <img src="@/assets/images/supplierDisplayCenter/组 73.png" alt="" />
    </div>
    <div class="hotActivity_filter w1200">
      <div class="hotActivity_filter_title">热门活动</div>
      <div class="catalogBox" v-if="topFormData.length > 0">
        <div class="titBox" v-for="(item, ind) in topFormData" :key="ind">
          <span class="firstChild">{{ item.name }}:</span>
          <span v-for="(child, index) in item.value" :key="index" class="primary_text_color">
            <template v-if="index < item.value.length - 1">{{ child.name }}、</template>
            <template v-else>{{ child.name }}</template>
          </span>
          <span @click="removeItem(item, ind)">
            <img src="../../assets/images/supplierDisplayCenter/react.png" alt style="cursor: pointer" />
          </span>
        </div>
        <div style="cursor: pointer; display: inline-block" @click="resetEffect">
          清空筛选
        </div>
      </div>
      <div class="filter-wrapper">
        <filter-item :default-params="activityParams" :isCheckbox="false" :data="activityList" title="活动类型"
          @ok="handleFilter($event, 'activityParams', '活动类型')"></filter-item>
        <a-row class="hotActivity_filter_row">
          <a-col :span="2" style="
                font-family: PingFangSC-Medium, PingFang SC, sans-serif;
                line-height: 30px;
                font-size: 11px;
                color: #323232;
              ">按时间：</a-col>
          <a-col :span="20">
            <a-range-picker format="YYYY-MM-DD HH:mm:ss" @change="onChange" /></a-col>
        </a-row>
        <filter-item :default-params="statusParams" :data="statusList" title="按状态"
          @ok="handleFilter($event, 'statusParams', '按状态')"></filter-item>
        <filter-item :default-params="industryParams" :data="industryList" title="按行业"
          @ok="handleFilter($event, 'industryParams', '按行业')"></filter-item>

        <filter-item :default-params="areaNameParams" :data="areaNameList" title="按地区"
          @ok="handleFilter($event, 'areaNameParams', '地区')"></filter-item>
      </div>
    </div>
    <div class="hotActivity_list w1200">
      <div class="hotActivity_list_item" v-for="item in meetingData" :key="item.id">
        <img class="hotActivity_list_img" :src="item.thumbnail" />
        <div v-if="item.type == '1'" class="hotActivity_list_item_tag tag1">
          展会
        </div>
        <div v-if="item.type == '2'" class="hotActivity_list_item_tag tag2">
          走进采购人
        </div>
        <div v-if="item.type == '3'" class="hotActivity_list_item_tag tag3">
          培训
        </div>
        <div v-if="item.type == '4'" class="hotActivity_list_item_tag tag4">
          招商
        </div>
        <div class="hotActivity_list_content">
          <div class="hotActivity_list_content_top">
            {{ item.name }}
          </div>
          <div class="hotActivity_list_content_des">
            <div class="hotActivity_des_left">
              <a-row>
                <img src="@/assets/images/supplierDisplayCenter/路径 (1).png" alt="" />
                <span>举办地点：</span>
                <span>{{ item.areaName }}</span>
              </a-row>
              <a-row class="MT20">
                <img src="@/assets/images/supplierDisplayCenter/路径 (2).png" alt="" />
                <span>展会时间：</span>
                <span>{{ item.beginTime }} - {{ item.endTime }}</span>
              </a-row>
              <a-row class="MT20">
                <img src="@/assets/images/supplierDisplayCenter/路径 (2).png" alt="" />
                <span>当前状态：</span>
                <span v-if="item.status == '01'">
                  即将开始
                </span>
                <span v-if="item.status == '02'">
                  进行中
                </span>
                <span v-if="item.status == '03'">
                  已结束
                </span>
              </a-row>
            </div>
            <div class="hotActivity_des_right">
              <a-row>
                <img src="@/assets/images/supplierDisplayCenter/路径 (1).png" alt="" />
                <span>行业：</span>
                <span>{{ item.tradeName }}</span>
              </a-row>
              <a-row class="MT20">
                <img src="@/assets/images/supplierDisplayCenter/路径 (3).png" alt="" />

                <span>推荐星级：</span>
                <a-rate class="my-rate-style" v-model="item.recommendationIndex" :disabled="true" allow-half />
              </a-row>
            </div>
          </div>
        </div>
        <div class="hotActivity_list_btn">
          <div class="enroll_btn" v-if="item.status != '03'" @click="enrollClick(item)">
            立即报名
          </div>
          <div class="detail_btn" @click="showDetail(item)">查看详情</div>
        </div>
      </div>
    </div>
    <a-row class="pagination-box w1200">
      <a-col :span="6" class="pagination-l">
        <div>
          共 {{ paging.total }} 条记录 第 {{ paging.current }} /
          {{ Math.ceil(paging.total / paging.pageSize) }} 页
        </div>
      </a-col>
      <a-col :span="18" class="pagination-r">
        <a-pagination :pageSizeOptions="paging.pageSizeOptions" :total="paging.total" showSizeChanger showQuickJumper
          :pageSize="paging.pageSize" v-model="paging.current" @showSizeChange="onShowSizeChange" @change="pageChange">
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </a-col>
    </a-row>
    <enrollModal ref="enrollModal"></enrollModal>
  </div>
</template>
  
<script>
import FilterItem from "@/components/base/FilterItem";
import common from "@/assets/js/common.js";
import enrollModal from "./components/enrollModal";
import Top from '@/components/base/Top.vue'
import MallHeader from '@/components/base/MallHeader.vue'
import { queryAreaNameList, popularExhibitionsPage } from '@/api/portal'

export default {
  name: "hotActivity",
  components: {
    FilterItem,
    enrollModal,
    Top,
    MallHeader
  },
  data() {
    return {
      rateNum: 3,
      meetingData: [],
      areaNameParams: [],
      areaNameList: [],
      activityParams: [],
      industryParams: [],
      industryList: [
        {
          code: "01",
          name: "建筑行业",
        },
        {
          code: "02",
          name: "采购行业",
        },
        {
          code: "03",
          name: "医药行业",
        }
      ],
      activityList: [
        {
          code: "1",
          name: "展会",
        },
        {
          code: "2",
          name: "走进采购人",
        },
        {
          code: "3",
          name: "培训",
        },
        {
          code: "4",
          name: "招商",
        },
      ],
      topFormData: [],
      statusParams: [],
      statusList: [
        {
          code: "01",
          name: "即将开始",
        },
        {
          code: "02",
          name: "进行中",
        },
        {
          code: "03",
          name: "已结束",
        },
      ],
      // 分页
      paging: {
        pageSizeOptions: common.pageConfig.pageSizeOptions,
        pageSize: common.pageConfig.pageSize,
        current: 1,
        total: 0,
      },
      beginTime: "",
      endTime: "",
    };
  },
  mounted() {
    this.init()
    this.loadData();
    this.getAreaList();
  },
  methods: {
    init() {
      queryAreaNameList({}).then(res => {
        if (res.code == 0) {
          this.areaNameList = res.data.map((item, index) => {
            return {
              code: index + 1,
              name: item
            }
          })
        }
      })
    },
    // 顶部删除事件
    removeItem(item, index) {
      this.topFormData.splice(index, 1);
      this._data[item.key].splice(0, this._data[item.key].length);
      this.loadData();
    },
    resetEffect() {
      this.topFormData.splice(0, this.topFormData.length);
      this.statusParams.splice(0, this.statusList.length);
      this.areaNameParams.splice(0, this.areaNameList.length);
      this.industryParams.splice(0, this.industryList.length);
      this.activityParams.splice(0, this.activityList.length)
      this.type = undefined
      this.loadData();
    },
    enrollClick(item) {
      console.log(item);
      this.$refs.enrollModal.setTitleAndId(item.name, item.id);
      this.$refs.enrollModal.open();
    },
    loadData(reload) {
      if (reload) {
        this.paging.current = 1;
      }

      console.log('activityList',this.activityParams)
      let param = {
        statusList: this.statusParams,
        areaNameList: this.areaNameParams,
        endTime: this.endTime,
        beginTime: this.startTime,
        showStatus: 1,
        page: this.paging.current,
        limit: this.paging.pageSize,
        type: this.activityParams[0],
        tradeNameList:this.industryParams
      };
      popularExhibitionsPage(param).then((res) => {
        if (res.code == 0) {
          this.meetingData = res.data.records;
          this.paging.total = parseInt(res.data.total);

          console.log(this.meetingData, '---------------------');
        }
      });
    },
    getAreaList() {
      this.$http
        .get(
          appConfig.microServModules.supplierrest +
          "api/popularhotActivitys/queryAreaNameList"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.areaNameList = res.data.data.map((item) => {
              return { code: item, name: item };
            });
          }
        });
    },
    showDetail(item) {
      this.$router.push({ path: "hotActivityDetail", query: { id: item.id } });
    },
    handleFilter(e, key, title) {
      console.log(e)
      this._data[key] = e.map((item) => item.id);
      this._data[key].splice(0, 0);
      if (e.length > 0) {
        const index = this.topFormData.findIndex((item) => item.key === key);
        if (this.topFormData.length === 0 || index === -1)
          this.topFormData.push({ name: title, value: e, key: key });
        else {
          this.$set(this.topFormData[index], "value", [...e]);
        }
      }
      this.loadData(true);
      console.log(this._data);
    },
    onShowSizeChange(current, pageSize) {
      this.paging.pageSize = pageSize;
      this.paging.current = current;
      this.loadData(true);
    },
    //当前页改变
    pageChange(page, pageSize) {
      this.paging.current = page;
      this.paging.pageSize = pageSize;
      this.loadData(false);
    },
    onChange(dates, dateStrings) {
      this.startTime = dateStrings[0];
      this.endTime = dateStrings[1];
      this.loadData(true);
    },
  },
};
</script>
  
<style scoped lang="scss">
$colorPrimary: #c29a62;

/deep/ .ant-calendar-range-picker-input:placeholder-shown {
  font-size: 12px;
}

.my-rate-style {
  display: inline;
  font-size: 12px;
  vertical-align: top;
}

.hotActivity_filter_row {
  background-color: #fff;
  padding: 10px 0;
  margin: 0 20px;
  border-bottom: 1px dashed #e2e2e2;
}

.hotActivity_filter_title {
  padding: 10px 0;
}

.hotActivity {
  background-color: #f6f6f6;
}

.hotActivity_advert {
  height: 200px;

  img {
    width: 100%;
    height: 100%;
  }
}

.hotActivity_list {
  margin-top: 30px !important;
}

.hotActivity_list_item {
  width: 100%;
  height: 190px;
  border-radius: 4px;
  display: flex;
  margin-bottom: 20px;
  padding: 20px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;

  .hotActivity_list_img {
    width: 200px;
    height: 150px;
  }

  .hotActivity_list_item_tag {
    height: 24px;
    border-radius: 4px 0px 10px 0px;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    text-align: center;
    padding: 0 10px;

    &.tag1 {
      background: #c29a62;
    }

    &.tag2 {
      background: #009640;
    }

    &.tag3 {
      background: #d61518;
    }
    &.tag4 {
      background: purple;

    }
  }

  .hotActivity_list_content {
    flex: 10;
    margin-left: 20px;
    padding: 10px 0;

    .hotActivity_list_content_top {
      font-family: PingFangSC-Medium, sans-serif;
      font-size: 18px;
      font-weight: normal;
      line-height: 18px;
      display: flex;
      align-items: flex-end;
      color: #323232;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; // 默认不换行；
      width: 600px;
    }

    .hotActivity_list_content_des {
      display: flex;
      margin-top: 11px;

      .hotActivity_des_left {
        margin-right: 20px;
      }
    }
  }

  .hotActivity_list_btn {
    flex: 1;

    .enroll_btn {
      width: 90px;
      height: 24px;
      line-height: 24px;
      border-radius: 742px;
      opacity: 1;
      /* 自动布局 */
      display: flex;
      flex-direction: column;
      text-align: center;
      margin-bottom: 10px;
      box-sizing: border-box;
      border: 1px solid #c29a62;
      color: #c29a62;
      cursor: pointer;
    }

    .detail_btn {
      width: 90px;
      height: 24px;
      text-align: center;
      border-radius: 500px;
      opacity: 1;
      line-height: 24px;
      /* 自动布局 */
      display: flex;
      flex-direction: column;
      cursor: pointer;
      box-sizing: border-box;
      border: 1px solid #e2e2e2;
    }
  }
}

.catalogBox {
  background: #fff;
  margin-bottom: 20px;
}

.titBox {
  background: #fff;
  border: 1px solid rgba(226, 226, 226, 1);
  padding: 0 5px;
  margin-right: 5px;
  display: inline-block;

  .firstChild {
    color: rgba(100, 100, 100, 1);
  }
}

.searchItem {
  margin-top: 10px;
}

.searchItem .titBox {
  background: #fff;
  border: 1px solid rgba(226, 226, 226, 1);
  margin-top: 9px;
  padding: 0 5px;
  margin-left: 10px;

  .firstChild {
    color: rgba(100, 100, 100, 1);
  }

  .twoChild {
    color: #1890ff;
  }
}

.filter-wrapper {
  width: 100%;
  margin: 20px auto;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);

  // &:last-child {
  //   padding: 20px;
  // }

  .ant-radio-button-wrapper {
    padding-right: 30px;
    user-select: none;

    &:first-child {
      padding-right: 15px;
    }
  }

  .icon-wrapper {
    display: inline-block;
    position: absolute;
    right: 15px;

    i {
      font-size: 12px;
      color: #909090;
      display: block;

      &.active {
        color: var(--customThemeColor);
      }

      &:first-child {
        margin-top: 4px;
      }

      &:last-child {
        margin-top: -4px;
      }
    }
  }
}

.pagination-box {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding-left: 10px;
}

.pagination-box .pagination-r {
  text-align: right;
}
</style>
  